<template>
    <div class="container" v-if="tableData.length > 0">
        <h2 class="name">商品列表</h2>
        <div class="table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column type="index" label="序号" width="70" />
                <el-table-column prop="name" label="商品名" width="180" />
                <el-table-column prop="price" label="商品价格" width="120"/>
                <el-table-column label="类别" width="120" v-if="cateList.length>0">
                    <template #default="scope">
                        <span style="margin-left: 10px">{{ cateList.filter(item=>item.catevalue==scope.row.cateid)[0].catename }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="typeid" label="类型" width="120" v-if="typeList.length>0">
                    <template #default="scope">
                        <span style="margin-left: 10px">{{ typeList.filter(item=>item.typevalue==scope.row.typeid)[0].typename }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="percent" label="商品折扣" width="120">
                    <template #default="scope">
                        <span style="margin-left: 10px">{{scope.row.percent==10?'全价':scope.row.percent+'折'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="上架时间" width="150"/>
                <el-table-column prop="is_delete" label="是否下架" width="120">
                    <template #default="scope">
                        <el-switch 
                            v-model="scope.row.is_delete" 
                            active-text="是" 
                            active-color="#13ce66"
                            inactive-text="否" 
                            inactive-color="#ff4949"
                            @change="changeDel({...scope.row,is_delete:scope.row.is_delete})"
                            />
                    </template>
                </el-table-column>
                <el-table-column prop="is_sec" label="是否参与今日秒杀" width="120">
                    <template #default="scope">
                        <el-switch 
                            v-model="scope.row.is_sec" 
                            active-text="是" 
                            active-color="#13ce66"
                            inactive-text="否" 
                            inactive-color="#ff4949"
                            @change="changeSec({...scope.row,is_sec:scope.row.is_sec})"
                            />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                     <template #default="scope">
                         <el-button type="primary" @click="updBtn(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="centerDialogVisible" title="修改商品信息" width="30%" center>
            <el-form
                label-position="left"
                label-width="100px"
                :model="form"
                style="max-width: 500px"
                ref="myform"
                :rules="rules"
                >
                <el-form-item 
                    label="商品价格"
                    prop="price"
                    >
                    <el-input v-model="form.price" clearable placeholder="请输入商品整数的价格"/>
                </el-form-item>

                <el-form-item 
                    label="商品库存"
                    prop="count"
                    >
                    <el-input v-model="form.count" clearable placeholder="请输入商品数量"/>
                </el-form-item>

                <el-form-item 
                    label="商品折扣"
                    prop="percent"
                    >
                    <el-input v-model="form.percent" type="Number" min="1" max="10" placeholder="请输入商品折扣，1代表一折"/>
                </el-form-item>

                <el-form-item 
                    label="商品类别"
                    prop="cateid"
                    >
                    <el-select v-if="cateList.length>0" clearable v-model="form.cateid" placeholder="请选择" size="middle">
                        <el-option
                        v-for="(val,key) in cateList"
                        :key="key"
                        :label="val.catename"
                        :value="val.catevalue"
                        />
                    </el-select>
                </el-form-item>
               
                <el-form-item 
                    label="商品类型"
                    prop="typeid"
                    >
                    <el-select v-if="cateList.length>0" clearable v-model="form.typeid" placeholder="请选择" size="middle">
                        <el-option
                        v-for="(val,key) in typeList"
                        :key="key"
                        :label="val.typename"
                        :value="val.typevalue"
                        />
                    </el-select>
                </el-form-item>

                <!-- <div class="button">
                    <el-button type="primary" class="confirm" @click="submitForm">
                        确定
                    </el-button>
                    <el-button type="warning" class="confirm" @click="reset">
                        重置
                    </el-button>
                </div> -->
            </el-form>
            
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm(form)"
                >确定</el-button
                >
            </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>
import { onMounted, reactive, toRefs ,ref} from 'vue';
import {ajax} from '@/api';
import { ElMessage } from 'element-plus';
export default {
    setup(props){
        const state = reactive({
            tableData:[],
            centerDialogVisible:false,
            form:{},
             rules:{
                price:[
                    {
                        required:true,message:'请填写商品价格'
                    },
                    {
                        pattern:/\d+/g,message:'请输入符合合理的数据'
                    }
                ],
                count:[
                    {
                        required:true,message:'请填写数量'
                    },
                    {
                        pattern:/\d+/g,message:'请填写输入合理的数据'
                    }
                ],
                percent:[
                    {required:true,message:'请填写折扣'}
                ],
                cateid:[
                    {required:true,message:'请填写商品类别'}
                ],
                typeid:[
                    {required:true,message:'请填写类型'}
                ]
            }
        });

        const myform = ref();
        const getGoodsList = async ()=>{
            let {code,data} = await ajax.getGood();
            if(code==200){
                state.tableData = [...data] ; 
            }
        }

        const changeDel = async (val)=>{
            let {code,data} = await ajax.updGood({_id:val._id,is_delete:val.is_delete});
            if(code == 200){
                getGoodsList();
            }
        }
        
        const changeSec = async (val)=>{
            let {code,data} = await ajax.updGood({_id:val._id,is_sec:val.is_sec});
            if(code == 200){
                getGoodsList();
            }
        }

        const updBtn = (val)=>{
            state.centerDialogVisible = true ;
            state.form = {...val} ; 
        }

        const submitForm = (val)=>{
            console.log(val);
            myform.value.validate(async (valid)=>{
                if(valid){
                    let {code,data} = await ajax.updGood(val);
                    if(code == 200){
                        state.centerDialogVisible = false ; 
                        getGoodsList();
                        ElMessage.success('修改成功！');
                    }
                } else {
                    ElMessage.error('请输入符合要求的数据');
                }
            });
        }

        onMounted(()=>{
           getGoodsList(); 
        });

        return {
            ...toRefs(state),
            updBtn,
            changeDel,
            changeSec,
            submitForm,
            myform
        }
    }
}
</script>
<style lang="scss" scoped>
.container {

    .name{
        height: 60px;
        line-height: 60px;
        padding-left: 40px;
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        background-color: burlywood;
    }
}
</style>